<template>
  <div class="monitor-page">
    <!-- 患者列表页面 -->
    <Screen @statusChange='statusChange'>
      <div class="solt">
        <div class="table" v-show="buttonFlag == 1">
          <Table
            :border='false'
            context-menu
            show-context-menu
            :loading="loading"
            :columns="columns"
            :data="tableData"
            @on-contextmenu="handleContextMenu">
            <template slot="avatar" slot-scope="{ row }">
              <img class="avatar" onerror="this.src='https://webimg.ziroom.com/1c853bc6-21fc-4e32-8a6f-18ec2c6fef32.png'" :src="row.avatar" alt="">
            </template>
            <template slot="status" slot-scope="{ row }">
              {{row.device_id ? '动态监测' : '指尖监测'}}
            </template>
            <template slot="source" slot-scope="{ row }">
              {{row.source == 1 ? '美奇' : row.source == 2 ? '瞬感' :'Yami'}}
            </template>
             <template slot="last_bloodsugar_time" slot-scope="{ row }">
              {{row.last_bloodsugar_time + ' ' + row.last_blood_sugar}}
            </template>
            <template slot="common_rate" slot-scope="{ row }">
              {{row.common_rate + '%'}}
            </template>
            <template slot-scope="{ row }" slot="action">
                <Icon type="ios-more" @click="action(row)" />
            </template>
            <!-- <template slot="contextMenu">
              <DropdownItem @click.native="handleContextMenuEdit">编辑</DropdownItem>
              <DropdownItem @click.native="handleContextMenuDelete" style="color: #ed4014">删除</DropdownItem>
            </template> -->
          </Table>
          <div class="page">
            <Page :total="100" show-sizer show-elevator show-total prev-text="上一页" next-text="下一页" />
          </div>
        </div>
        <div class="card" v-show="buttonFlag == 2">
          <div class="card-item">
            <div class="item-top">
              <div class="top-left">
                <div class="name-age">
                  <span class="name">王晓明</span>
                  <span class="age">55岁</span>
                  <span class="age">男</span>
                </div>
                <div class="time">
                  3分钟前
                </div>
                <div class="measure">
                  <div class="number-big">6.2</div>
                  <div class="number-small">
                    <div class="small-top">
                      <div class="arrow">
                        <Icon type="md-arrow-round-up" />
                      </div>
                      <div class="number-add">+0.2</div>
                    </div>
                    <div class="small-measure">
                      mmol/L
                    </div>
                  </div>
                </div>
              </div>
              <div class="top-right">
                <div class="image">
                  <img src="../../assets/images/process.png" alt="">
                  <div>正在监测</div>
                </div>
                <div class="unit">15床</div>
              </div>
            </div>
            <div class="item-middle">
              <chart-line style="height: 100px;" :value="pieData" text="患病类型">
              </chart-line>
              <!-- <div class="statistics">
                <div class="zhijian item-box">
                  <div class="title">300次</div>
                  <div class="sub_title">指尖血糖监测</div>
                </div>
                <div class="dongtai item-box">
                  <div class="title">3周期</div>
                  <div class="sub_title">动态血糖监测</div>
                </div>
              </div> -->
            </div>
            <div class="item-bottom">
              <div class="ku">
                <img src="../../assets/icons/ku.png" alt="">
                333克
              </div>
              <div class="u">
                <img src="../../assets/icons/u.png" alt="">
                12U
              </div>
              <div class="ci">
                <img src="../../assets/icons/ci.png" alt="">
                3次
              </div>
              <div class="kal">
                <img src="../../assets/icons/kal.png" alt="">
                1234千卡
              </div>
            </div>
          </div>
        </div>
      </div>
    </Screen>
  </div>
</template>

<script>
import Screen from '_c/screen'
import CountTo from '_c/count-to'
import { ChartLine } from '_c/charts'
import { getTableData } from '@/api/huanzhe'
// import { loginAction } from '@/api/login'
export default {
  name: 'patient_page',
  components: {
    CountTo,
    Screen,
    ChartLine
  },
  data () {
    return {
      pieData: [
        { value: 335, name: '直接访问' },
        { value: 310, name: '邮件营销' },
        { value: 234, name: '联盟广告' },
        { value: 135, name: '视频广告' },
        { value: 1548, name: '搜索引擎' }
      ],
      button: 1,
      name1: '2',
      inputValue: '',
      model1: '',
      loading: false,
      columns: [
        {
          title: '头像',
          key: 'avatar',
          slot: 'avatar',
          align: 'center'
        },
        {
          title: '用户姓名',
          key: 'nickname',
          align: 'center'
        },
        {
          title: '年龄',
          key: 'age',
          align: 'center'
        },
        {
          title: '性别',
          key: 'sex_value',
          align: 'center'
        },
        {
          title: '类型',
          key: 'suffer_type_value',
          align: 'center'
        },
        {
          title: '状态',
          key: 'status',
          slot: 'status',
          align: 'center'
        },
        {
          title: '监测设备',
          key: 'source',
          slot: 'source',
          align: 'center'
        },
        {
          title: '最新血糖',
          key: 'last_bloodsugar_time',
          slot: 'last_bloodsugar_time',
          width: '150px',
          align: 'center'
        },
        {
          title: '达标率',
          key: 'common_rate',
          slot: 'common_rate',
          align: 'center'
        },
        {
          title: '操作',
          key: 'source',
          slot: 'action',
          align: 'center'
        }
      ],
      tableData: [],
      buttonFlag: 1
    }
  },
  mounted () {
    this.getTableData()
  },
  methods: {
    async getTableData () {
      const params = {
        type: 0,
        page: 1,
        limit: 20
      }
      const res = await getTableData(params)
      if (res.code == 100000) {
        this.tableData = res.data.list
      }
    },
    handleContextMenu (row) {
      const index = this.tableData.findIndex(item => item.name === row.name)
      this.contextLine = index + 1
    },
    handleContextMenuEdit () {
      this.$Message.info('Click edit of line' + this.contextLine)
    },
    handleContextMenuDelete () {
      this.$Message.info('Click delete of line' + this.contextLine)
    },
    statusChange (item) {
      console.log(item)
      this.buttonFlag = item
    },
    action(row){
      
    }
  }
}
</script>
<style lang="less">
  .size {
    width: 100%;
    height: 100%;
  }
  .avatar {
    width: 37px;
    height: 37px;
    border-radius: 50%;
    img {
      .size;
    }
  }
</style>
